<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域视频播放测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            background: white;
            margin: 20px 0;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        video {
            width: 100%;
            max-width: 600px;
            height: auto;
            border: 1px solid #ccc;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
            font-weight: bold;
        }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
        .warning { background-color: #fff3cd; color: #856404; }
        .url-info {
            background-color: #e9ecef;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
            margin: 10px 0;
        }
        .test-button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h1>🎬 跨域视频播放测试</h1>
    <p><strong>当前页面:</strong> <span id="currentUrl"></span></p>
    <p><strong>目标服务器:</strong> http://localhost:806</p>
    
    <div class="test-container">
        <h2>测试 1: 直接视频元素跨域加载</h2>
        <div class="url-info">
            视频URL: http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4
        </div>
        <video id="video1" controls preload="metadata" crossorigin="anonymous">
            <source src="http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4" type="video/mp4">
            您的浏览器不支持视频播放。
        </video>
        <div id="status1" class="status info">等待加载...</div>
    </div>

    <div class="test-container">
        <h2>测试 2: Fetch API 跨域请求</h2>
        <button class="test-button" onclick="testFetchVideo()">测试 Fetch 请求</button>
        <div id="fetchStatus" class="status info">点击按钮开始测试</div>
        <div id="fetchDetails"></div>
    </div>

    <div class="test-container">
        <h2>测试 3: XMLHttpRequest 跨域请求</h2>
        <button class="test-button" onclick="testXHRVideo()">测试 XHR 请求</button>
        <div id="xhrStatus" class="status info">点击按钮开始测试</div>
        <div id="xhrDetails"></div>
    </div>

    <div class="test-container">
        <h2>测试 4: 模拟 Vue 应用的视频加载</h2>
        <button class="test-button" onclick="testVueStyleVideo()">模拟 Vue 加载</button>
        <video id="vueVideo" controls style="display:none;">
            <source type="video/mp4">
        </video>
        <div id="vueStatus" class="status info">点击按钮开始测试</div>
    </div>

    <script>
        // 显示当前页面URL
        document.getElementById('currentUrl').textContent = window.location.href;

        // 测试1: 直接视频元素
        function setupVideoTest() {
            const video = document.getElementById('video1');
            const status = document.getElementById('status1');
            
            video.addEventListener('loadstart', () => {
                status.textContent = '🔄 开始加载视频...';
                status.className = 'status info';
            });
            
            video.addEventListener('loadedmetadata', () => {
                status.textContent = `✅ 视频元数据加载成功 - 时长: ${Math.round(video.duration)}秒`;
                status.className = 'status success';
            });
            
            video.addEventListener('canplay', () => {
                status.textContent = '✅ 视频可以播放，跨域访问成功！';
                status.className = 'status success';
            });
            
            video.addEventListener('error', (e) => {
                const error = video.error;
                let errorMsg = '❌ 视频加载失败: ';
                switch(error.code) {
                    case 1:
                        errorMsg += '视频加载被中止';
                        break;
                    case 2:
                        errorMsg += '网络错误 (可能是跨域问题)';
                        break;
                    case 3:
                        errorMsg += '视频解码错误';
                        break;
                    case 4:
                        errorMsg += '视频格式不支持';
                        break;
                    default:
                        errorMsg += '未知错误';
                }
                status.textContent = errorMsg;
                status.className = 'status error';
                console.error('Video error:', error);
            });
        }

        // 测试2: Fetch API
        async function testFetchVideo() {
            const status = document.getElementById('fetchStatus');
            const details = document.getElementById('fetchDetails');
            
            status.textContent = '🔄 正在测试 Fetch API...';
            status.className = 'status info';
            
            try {
                const response = await fetch('http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4', {
                    method: 'HEAD',
                    mode: 'cors'
                });
                
                if (response.ok) {
                    status.textContent = '✅ Fetch 请求成功！';
                    status.className = 'status success';
                    details.innerHTML = `
                        <div class="url-info">
                            状态码: ${response.status}<br>
                            Content-Type: ${response.headers.get('content-type')}<br>
                            Content-Length: ${response.headers.get('content-length')}<br>
                            Access-Control-Allow-Origin: ${response.headers.get('access-control-allow-origin')}
                        </div>
                    `;
                } else {
                    status.textContent = `❌ Fetch 请求失败: ${response.status}`;
                    status.className = 'status error';
                }
            } catch (error) {
                status.textContent = `❌ Fetch 请求错误: ${error.message}`;
                status.className = 'status error';
                details.innerHTML = `<div class="url-info">错误详情: ${error.toString()}</div>`;
                console.error('Fetch error:', error);
            }
        }

        // 测试3: XMLHttpRequest
        function testXHRVideo() {
            const status = document.getElementById('xhrStatus');
            const details = document.getElementById('xhrDetails');
            
            status.textContent = '🔄 正在测试 XMLHttpRequest...';
            status.className = 'status info';
            
            const xhr = new XMLHttpRequest();
            xhr.open('HEAD', 'http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4', true);
            
            xhr.onload = function() {
                if (xhr.status === 200) {
                    status.textContent = '✅ XHR 请求成功！';
                    status.className = 'status success';
                    details.innerHTML = `
                        <div class="url-info">
                            状态码: ${xhr.status}<br>
                            Content-Type: ${xhr.getResponseHeader('content-type')}<br>
                            Content-Length: ${xhr.getResponseHeader('content-length')}<br>
                            Access-Control-Allow-Origin: ${xhr.getResponseHeader('access-control-allow-origin')}
                        </div>
                    `;
                } else {
                    status.textContent = `❌ XHR 请求失败: ${xhr.status}`;
                    status.className = 'status error';
                }
            };
            
            xhr.onerror = function() {
                status.textContent = '❌ XHR 请求错误 (可能是跨域问题)';
                status.className = 'status error';
                console.error('XHR error:', xhr);
            };
            
            xhr.send();
        }

        // 测试4: 模拟Vue应用
        function testVueStyleVideo() {
            const status = document.getElementById('vueStatus');
            const video = document.getElementById('vueVideo');
            
            status.textContent = '🔄 模拟 Vue 应用加载视频...';
            status.className = 'status info';
            
            // 模拟processVideoUrl函数的逻辑
            const baseUrl = 'http://localhost:806/public';
            const videoPath = '/chap02/videos/2.1前端开发环境.mp4';
            const fullUrl = baseUrl + videoPath;
            
            video.src = fullUrl;
            video.style.display = 'block';
            
            video.addEventListener('loadedmetadata', () => {
                status.textContent = '✅ Vue 风格加载成功！';
                status.className = 'status success';
            });
            
            video.addEventListener('error', () => {
                status.textContent = '❌ Vue 风格加载失败';
                status.className = 'status error';
            });
            
            video.load();
        }

        // 页面加载完成后初始化
        window.addEventListener('load', () => {
            setupVideoTest();
            console.log('跨域测试页面加载完成');
            console.log('当前页面:', window.location.href);
            console.log('目标视频URL:', 'http://localhost:806/public/chap02/videos/2.1前端开发环境.mp4');
        });
    </script>
</body>
</html>